<template>
  <a-range-picker
    @change="onChange"
    v-model="value"
    format="YY年MM月DD日">
  </a-range-picker>
</template>

<script>
import moment from 'moment'
const fmt = 'YYYY-MM-DD'
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    modelVal: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      value: []
    }
  },
  mounted () {
    this.setValue()
  },
  watch: {
    modelVal () {
      this.setValue()
    }
  },
  methods: {
    setValue () {
      if (this.modelVal.length === 0) {
        this.value = []
      }
      this.value = this.modelVal.map(t => {
        return moment(t, fmt)
      })
    },
    onChange (newVal) {
      this.$emit('change', newVal.map(t => {
        return t.format(fmt)
      }))
    }
  }
}
</script>
<style lang="less" scoped>
</style>
